<template>
    <div class="select">
      <div class="select2">
        <div class="adss">
          <p>
            <img src="/static/lyl/9.png" alt="">
            <span>发货地</span>
          </p>
          <ul>
            <li @click="pitcup(index)" :class="{act:item.bols}" v-for="(item,index) in data">{{item.tit}} <img v-if="item.bols" src="/static/lyl/jiehu.png" alt=""></li>
          </ul>
        </div>
        <div class="adss">
          <p>
            <img src="/static/lyl/frnbei-8.png" alt="">
            <span>商品类型</span>
          </p>
          <ul>
            <li @click="pitc(index)" :class="{act:item.bols}" v-for="(item,index) in data1">{{item.tit}} <img v-if="item.bols" src="/static/lyl/jiehu.png" alt=""></li>
          </ul>
        </div>
        <div class="adss">
          <p>
            <img src="/static/lyl/feblei-7.png" alt="">
            <span>分类</span>
          </p>
          <ul>
            <li @click="pics(index)" :class="{act:item.bols}" v-for="(item,index) in data2">{{item.tit}} <img v-if="item.bols" src="/static/lyl/jiehu.png" alt=""></li>

             <li class="mores"><router-link to="/genduo">更多分类 <img src="/static/lyl/feblei-6.png" alt=""></router-link></li>


          </ul>
        </div>
        <div class="foot-er">
          <span @click="fal()">重置</span>
          <router-link to="/mian/1">
            <span @click="chuan()">确定</span>
          </router-link>
        </div>
        <router-view></router-view>
      </div>
    </div>
</template>

<script>
  import Genduo from './Genduo'
    export default {
      name: "Shai",
      data(){
        return {
          data:[
            {tit:'日本',bols:false},
            {tit:'美国',bols:false},
            {tit:'中国',bols:false},
            {tit:'澳大利亚',bols:false},
            {tit:'英国',bols:false}
            ],
          data1:[
            {tit:'促销商品',bols:false},
            {tit:'首发商品',bols:false}
            ],
          data2:[
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false},
            {tit:'名牌包包',bols:false},
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false},
            {tit:'名牌包包',bols:false},
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false},
            {tit:'名牌包包',bols:false},
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false},
            {tit:'名牌包包',bols:false},
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false},
            {tit:'名牌包包',bols:false},
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false},
            {tit:'名牌包包',bols:false},
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false}
            ]
        }
      },
      methods:{
        pitcup(i){
          this.data[i].bols = !this.data[i].bols;
        },
        pitc(i){
          this.data1[i].bols = !this.data1[i].bols;
        },
        pics(i){
          this.data2[i].bols = !this.data2[i].bols;
        },
        fal(){
          for (var i = 0; i < this.data.length; i++) {
            this.data[i].bols = false;
          }
          for (var i = 0; i < this.data1.length; i++) {
            this.data1[i].bols = false;
          }
          for (var i = 0; i < this.data2.length; i++) {
            this.data2[i].bols = false;
          }
        },
        chuan(){
          for (var i = 0; i < this.data.length; i++) {
            if (this.data[i].bols) {
              this.$store.commit('tianjia',this
                .data[i]);
            }
          }
          for (var i = 0; i < this.data1.length; i++) {
            if (this.data1[i].bols) {
              this.$store.commit('tianjia',this.data1[i]);
            }
          }
          for (var i = 0; i < this.data2.length; i++) {
            if (this.data2[i].bols) {
              this.$store.commit('tianjia',this.data2[i]);
            }
          }
        }
      },
      components:{
        Genduo
      }
    }
</script>

<style scoped>
  .select{
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 143rem;
  }
  .select2{
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    width: 56rem;
    height: 143rem;
  }
  .adss{
    padding: 2rem;
    border-bottom: 1px solid #ccc;
  }
  .adss>p>span{
    font-size: 30px;
    vertical-align: top;
  }
  .adss>p>img{
    width: 3.5rem;
    height: 3.2rem;
    margin-right: 1.5rem;
  }
  .adss>ul{
    display: flex;
    flex-wrap: wrap;
  }
  .adss>ul>li{
    position: relative;
    width: 16rem;
    height: 8.2rem;
    line-height: 8.2rem;
    text-align: center;
    font-size: 28px;
    background: #f2f2f2;
    border-radius: 1rem;
    margin: 2rem 2rem 0 0;
  }
  .adss>ul>.act{
    background: #ffd3d3;
    color: #e53e42;
  }
  .adss>ul>li>img{
    position: absolute;
    left: 0;
    top: 0;
    width: 4.8rem;
    height: 4.4rem;
    border-radius: 1rem;
  }
  .adss>ul>li:nth-child(3n+3){
    margin-right: 0;
  }
  .adss>ul>.mores{
    font-size: 24px;
    background: #fff;
  }
  .adss>ul>.mores>img{
    position: static;
    width: 1rem;
    height: 1.4rem;
  }
  .foot-er{
    display: flex;
  }
  .foot-er span{
    display: block;
    width: 50%;
    height: 10rem;
    text-align: center;
    line-height: 10rem;
    font-size: 30px;
    margin-top: 8.4rem;
  }
  .foot-er>span{
    background: #f2f2f2;
  }
  .foot-er>a{
    width: 50%;
  }
  .foot-er>a span{
    width: 100%;
    color:#fff;
    background: #e53e42;
  }
</style>
